<template>
  <div id="app">
    <div style="display:flex;flex-direction:row;">
      <div v-loading="loading" element-loading-text="转换中..." style="flex-grow:1;flex-basis:1000px;font-size:12px!important">
        <div style="text-align:right">
          <el-button type="primary" @click="convertFile">开始生成</el-button>
        </div>
        <el-form ref="form" label-width="100px">
          <el-form-item label="选择待转换文件">
            <el-button @click="selectFilePath()" type="small">选择</el-button>
            <span style="padding-left:20px">{{inPath}}</span>
          </el-form-item>
          <el-form-item label="生成路径">
            <el-button @click="selectOutPath()" type="small">选择</el-button>
            <span style="padding-left:20px">{{outPath}}</span>
          </el-form-item>
          <el-form-item label="属性描述">
            <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 10}" placeholder="请输入内容" v-model="description"></el-input>
          </el-form-item>
          <el-form-item label="列名称配置">
          </el-form-item>
          <el-col :span="12">
            <el-form-item label="地块编号">
              <el-select v-model="header.code" placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="乡镇">
              <el-select v-model="header.town" placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="村">
              <el-select v-model="header.village" placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="图幅号">
              <el-select v-model="header.mapNum" placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="面积">
              <el-select v-model="header.area" placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="现状地类">
              <el-select v-model="header.landType" placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="地类代码">
              <el-select v-model="header.landCode" placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="X坐标">
              <el-select v-model="header.x" placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="Y坐标">
              <el-select v-model="header.y" placeholder="请选择">
                <el-option v-for="item in options" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="界值点编号">
              <el-select clearable v-model="header.pointNum" placeholder="请选择">
                <el-option v-for="item in options" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-form>
      </div>
      <div style="flex-basis:600px;padding:10px;">
        <el-form class="process">
          <el-form-item label="待生成地块数量:">
            {{process.totel_code}}
          </el-form-item>
          <el-form-item label="已生成地块数量:">
            {{process.deal_code}}
          </el-form-item>
          <el-form-item label="生成进度:">
            {{process.current_process}}%
          </el-form-item>
        </el-form>
        <div v-for="item of message">
          {{item}}
        </div>
      </div>
    </div>


  </div>
</template>

<script>
  import linq from 'linq'
  let now = new Date()
  let dest = ''
  dest += '格式版本号=1．01版本\r\n'
  dest += '数据产生单位=汉台区国土资源局\r\n'
  dest += `数据产生日期=${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()}\r\n`
  dest += '坐标系=80国家大地坐标系\r\n'
  dest += '几度分带=3\r\n'
  dest += '投影类型=高斯克吕格\r\n'
  dest += '计量单位=米\r\n'
  dest += '带号=36\r\n'
  dest += '精度=2\r\n'

  export default {
    data() {
      return {
        loading: false,
        outPath: '',
        inPath: '',
        description: dest,
        code: '',
        header: {
          code: '',
          town: '',
          village: '',
          mapNum: '',
          area: '',
          landType: '',
          landCode: '',
          x: '',
          y: '',
          pointNum: ''
        },
        process: {
          totel_code: 0,
          deal_code: 0,
          current_process: 0
        },
        options: [],
        message: [],
        convertData: null
      }
    },
    methods: {
      /**
       * 选择文件路径
       */
      selectFilePath(id) {
        this.$electron.remote.dialog.showOpenDialog({
          properties: ['openFile']
        }, files => {
          if (!files) return
          let [file] = files
          if (!file.endsWith('.xlsx')) {
            this.$message({
              message: '请确认导入文件格式为xlsx',
              type: 'warning'
            })
            return
          }

          this.inPath = file

          this.$electron.ipcRenderer.once('readFileDataSuccess', (event, [{ data }]) => {
            let [dataHeader, ...dataList] = data
            this.options = dataHeader.map((item, index) => ({
              value: index,
              label: item
            }))
            this.convertData = dataList
          })
          this.$electron.ipcRenderer.send('readFileData', file)
        })
      },
      /**
       * 选择目录路径
       */
      selectOutPath(id) {
        this.$electron.remote.dialog.showOpenDialog({
          properties: ['openDirectory']
        }, files => {
          if (!files) return
          let [file] = files
          this.outPath = file
        })
      },
      /**
       * 开始转换文件
       */
      convertFile() {
        if (Object.entries(this.header).some(([k, v]) => v === '' && k !== 'pointNum')) {
          this.$message({
            message: '请确认已选择每列对应名称',
            type: 'warning'
          })
          return
        }

        if (this.inPath === '') {
          this.$message({
            message: '请确认已选择待导入文件',
            type: 'warning'
          })
          return
        }

        if (this.outPath === '') {
          this.$message({
            message: '请确认已选择待导出目录',
            type: 'warning'
          })
          return
        }

        this.process.totel_code = 0
        this.process.deal_code = 0
        this.process.current_process = 0

        let data = linq.from(this.convertData)
          .where(x => x[this.header.code])
          .groupBy('$[' + this.header.code + ']').toArray()

        this.process.totel_code = data.length
        this.$electron.ipcRenderer.removeAllListeners('writeFileDataSuccess')
        this.$electron.ipcRenderer.on('writeFileDataSuccess', (event) => {
          this.process.deal_code += 1
          this.process.current_process = Math.floor((this.process.deal_code / this.process.totel_code) * 100)
        })

        try {
          for (let item of data) {
            let key = item.key()
            let items = item.getSource().map(x => ({
              code: x[this.header.code],
              town: x[this.header.town],
              village: x[this.header.village],
              mapNum: x[this.header.mapNum],
              area: (x[this.header.area]).toFixed(2),
              type: x[this.header.type],
              landType: x[this.header.landType],
              landCode: x[this.header.landCode],
              x: (x[this.header.x]).toFixed(3),
              y: (x[this.header.y]).toFixed(3),
              pointNum: this.header.pointNum ? (x[this.header.pointNum]) : ''
            }))
            this.$electron.ipcRenderer.send('writeFileData', `${this.outPath}/${key}.txt`, items, this.description)
          }
        } catch (ex) {
          this.$message({
            message: '文件生成异常',
            type: 'warning'
          })
        }
      }
    }
  }

</script>

<style>
  .process .el-form-item,
  .el-form-item__content {
    margin: 0px;
  }

  .process .el-form-item__label {
    font-size: 12px;
  }

  .el-form-item__label,
  .el-textarea__inner,
  .el-input__inner {
    font-size: 12px
  }

</style>
